<template>
    <div class="table-container">
        <el-row
            v-loading="listLoading"
            element-loading-text="正在加载新数据"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.3)">
            <transition-group appear>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="(card,index) in list" :key="index" style="margin-bottom:20px;padding: 15px">
                    <el-card :body-style="{ padding: '0px', height:'360px'}" shadow="hover">
                        <div style="padding: 6px;" v-for="(item, index2) in showRowColumn" :key="index2">
                            <div v-if="fieldValid[item.relcolumnId] === '1'">
                                <span>{{ item.columnName }} :</span><span>{{ card[item.columnId] }}</span>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </transition-group>
        </el-row>
    </div>
</template>

<script>
import funBtn from '@/components/table/funBtn'

export default {
    components: { funBtn },
    // mixins: [pagination],
    props: {
        filterData: Object,
        showRowColumn: Array,
        list: Array,
        listLoading: true,
        fieldValid: Object
    },
    data() {
        return {
            available: 1
        }
    },
    mounted() {
        // 用来监听滚轮
        window.addEventListener('scroll', this.handleScroll)
    },
    methods: {
        // 无限加载table数据
        loadMore() {
            console.log('到底了')
            this.$emit('loadMore')
        },
        handleScroll() {
            // 获取滚轮位置
            var scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop
            this.height1 = scrollTop
            // 文档高度
            this.height2 = document.body.scrollHeight
            // 可视区域
            this.height3 =
                document.compatMode === 'CSS1Compat'
                    ? document.documentElement.clientHeight
                    : document.body.clientHeight
            // 如果滚动到最低（这里设置离最底还有100距离才触发函数）
            if (this.height3 + this.height1 >= this.height2 - 100 && this.available) {
                this.available = 0
                this.loadMore()
            } else if (this.height3 + this.height1 < this.height2 - 100) {
                this.available = 1
            }
        }
    }
}
</script>

<style>
.v-enter,.v-leave-to{
    opacity: 0;
    transform: translateX(80px);
}
.v-enter-active,
.v-leave-active{
    transition: all 0.6s ease;
}
</style>
